<template>
  <div class="question-container">
    <el-dialog
      title="题目预览"
      :visible="previewDialogVisible"
      width="50%"
      @close="closePreview"
      @open="openPreview"
    >
      <el-row>
        <el-col :span="6">【题型】：{{ previewData.questionType|questionTypeFilters }}</el-col>
        <el-col :span="6">【编号】：{{ previewData.id }}</el-col>
        <el-col :span="6">【难度】：{{ previewData.difficulty|difficultyFilters }}</el-col>
        <el-col :span="6">【标签】：{{ previewData.tags }}</el-col>
        <el-col :span="6">【学科】：{{ previewData.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ previewData.catelogID }}</el-col>
        <el-col :span="6">【方向】：{{ previewData.direction }}</el-col>
      </el-row>
      <hr>
      【题干】:<div style="color:blue" v-html="previewData.question" />
      <hr>
      <div v-if="previewData.questionType!=='3'">
        <div>{{ previewData.questionType }}选项：(以下选中的选项为正确答案)</div>
        <div v-for="item in previewData.options" :key="item.code" class="radio" style="padding:8px 0">
          <el-radio v-if="previewData.questionType==='1'" :value="item.isRight" :label="1">{{ item.title }}</el-radio>
          <el-checkbox v-if="previewData.questionType==='2'" :value="item.isRight?true:false">{{ item.title }}</el-checkbox>
        </div>
        <hr>
        【参考答案】:<el-button type="danger" size="small" @click="openVideo">视频答案预览</el-button>
        <div v-show="isShow" class="video">
          <video ref="videoRef" :src="previewData.videoURL" controls />
        </div>
        <hr>
        【答案解析】:<div style="display:inline-block" v-html="previewData.answer" />
        <hr>
        【题目备注】：{{ previewData.remarks }}
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closePreview()">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { difficulty, questionType } from '../../api/hmmm/constants'
import { detail } from '../../api/hmmm/questions'
export default {
  name: 'QuestionPreview',
  filters: {
    questionTypeFilters(type) {
      // console.log(questionType, difficulty)
      if (type) {
        return questionType.find(item => item.value === +type).label + '题'
      }
    },
    difficultyFilters(difficultys) {
      if (difficultys) {
        return difficulty.find(item => item.value === +difficultys).label + '题'
      }
    }
  },
  props: {
    previewDialogVisible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      //   渲染数据
      previewData: {},
      checked: false, // 多选
      isShow: false
    }
  },
  methods: {
    // 弹框打开触发的方法
    async openPreview() {
      console.log(this.data.id)
      const { data } = await detail({ id: this.data.id })
      console.log(data)
      this.previewData = data
    },
    // 关闭弹框
    closePreview() {
      this.$emit('update:previewDialogVisible', false)
      // 关闭视频
      this.isShow = false
      this.$refs.videoRef.pause()
    },
    // 打开视频
    openVideo() {
      this.isShow = !this.isShow
      this.$nextTick(() => {
        this.$refs.videoRef.play()
        // console.log(this.$refs.videoRef)
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.question-container{
  .el-col{
    padding: 10px 0;
  }
}
.video{
  width: 400px;
  height: 300px;
  video {
    width: 100%;
    height: 100%;
  }}
</style>
